<template>
  <view class="content">
    <view class="box" v-for="(item, index) in commentslist" :key="index">
      <view @tap="gotoshop(item)" style="margin-right: 8rpx;">
        <image style="width: 80rpx; height:80rpx;" :src=item.merchantHead mode="scaleToFill" />
      </view>
      <view style="flex: 1;">
        <view style="display: flex; justify-content:space-between;">
          <text @tap="gotoshop(item)"
            style="font-weight: bold; font-size:40rpx; width: 140px; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;">{{
              item.merchantName }}</text>
          <text @tap="gotoshop(item)" style="color: #ccc;">{{ item.evaluateCreateTime }}</text>
        </view>
        <view @tap="gotoshop(item)" class="boxtwo">
          <view style="color: #ccc;">
            商家：
          </view>
          <view style="display: flex;">
            <image style="margin-right:8rpx;" src="../static/image/pagesDelivery/Star.png"
              v-for="(itemStar, indexStar) in Math.floor(item.userRatingType)" :key="indexStar" />
            <image src="../static/image/pagesDelivery/halfwayStar.png" v-show="item.userRatingType % 1 !== 0" />
          </view>
        </view>
        <view style="margin-top: 30rpx;">
          <text>{{ item.userEvaluate }}</text>
        </view>
        <view style="display: flex;margin-top:20rpx; flex-wrap:wrap;">
          <view style="margin-left:10rpx;" v-for="(item, index) in item.evaluateAge" :key="index">
            <image style="width:175rpx; height:175rpx;" :src="item.evaluateAge" mode="scaleToFill"  @click="preview(item.evaluateAge)"/>
          </view>
        </view>
        <view v-if="item.merchantEvaluate"
          style="background-color:#f5f5f5;margin-top:20rpx; padding:30rpx; border-radius:30rpx;">
          <view style="display: flex; justify-content:space-between;">
            <text style="color: #ccc;">商家回复</text>
            <text style="color: #ccc;">{{ item.evaluateUpdateTime }}</text>
          </view>
          <view style="margin-top: 10rpx;">
            <text style="color: #636363;">{{ item.merchantEvaluate }}</text>
          </view>
        </view>
        <view style="margin-top: 40rpx; display:flex;justify-content: flex-end;">
          <u-icon name="trash" color="#ccc" size="28"></u-icon>
          <text @tap="del(item,index)">删除</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { selectEvaluateUser, delectEvaluate } from '@/api/main'
export default {
  data() {
    return {
      commentslist: [],
      pageNum: 1,
      pageSize: 5,
      pagesStatus:false,
      delid: 0
    }
  },
  onLoad() {
    this.getlist()
  },
  onShow() {
 
  },
  methods: {
     //预览图片
     preview(img) {
      uni.previewImage({
        urls: [img], // 需要预览的图片链接列表
      });
    },
    getlist() {
      let obj = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      selectEvaluateUser(obj).then(res => {
        console.log('查看自己的评论', res)
        if (this.pageNum === 1) {
          this.commentslist = res.data
        } else {
          this.commentslist = this.commentslist.concat(res.data)
        }
        if(res.data.length < 5){
          this.pagesStatus = false
        }else{
          this.pagesStatus = true
        }
        
      })
    },
    del(item,index) {
      console.log('看看数据', item.evaluateId)
      this.delid = item.evaluateId
      let obj = {
        evaluateId: this.delid
      }
      let _this = this;
      uni.showModal({
        title: '删除',
        content: '确认删除嘛！',
        success: function (res) {
          if (res.confirm) {
            delectEvaluate(obj).then(res => {
              console.log('删除成功', index)
              if (res.code == 200) {
                _this.$u.toast('删除成功')
                _this.commentslist.splice(index, 1)
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
     
    },
    gotoshop(item) {
      if (item.orderType == 1) {
        uni.redirectTo({
          url: '/pagesDelivery/deliveryDetail?detailid=' + item.merchantId
        })
      } else if (item.orderType == 2) {
        uni.redirectTo({
          url: '/pagesHealth/goHistoryDetail?detailid=' + item.merchantId
        })
      } else if (item.orderType == 3) {
        uni.redirectTo({
          url: '/pagesAgriculture/agricultureDetail?id=' + item.merchantId
        })
      } else if (item.orderType == 4) {
        uni.redirectTo({
          url: '/pagesMaintain/maintainDetail?id=' + item.merchantId
        })
      }
    }
  },
  onReachBottom() {
    console.log("触底");
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.getlist()
    }
  },
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #F5F5F5;
  padding: 24rpx;
  min-height: 100vh;

  .box {
    border-radius: 8rpx;
    background-color: white;
    padding: 32rpx;
    display: flex;
    margin-bottom: 30rpx;

    .boxtwo {
      display: flex;
      align-items: center;

      image {
        width: 20rpx;
        height: 20rpx;
      }
    }
  }
}
</style>